<template>
  <div class="cup-add-tool scale-up-left"
       :style="{width:width+'px',height:height+'px'}"
       ref="moveDivCupAdd"
       @touchstart="down"
       @touchmove.prevent="move"
       @touchend="end"
  >
    <div class="dot" @click="close"></div>
    <nav class="bg-color" :style="{backgroundColor: colors[selectedColor]}">添加一个杯子</nav>

    <div class="wrapper" :style="{backgroundColor: colors[selectedColor]}">
      <div class="cup-add-content">

        <div class="input-c">
          <van-uploader v-model="fileList" multiple :max-count="1"/>
          <div class="input-c-main"
               :style="{width:width*0.53+'px',
               height:height*0.1+ 'px',
               lineHeight:height*0.1+ 'px',
               }"
          >
            <form>
              <div class="group">
                <input type="text" v-model="newCup.cupName" required/>
                <span class="bar"></span>
                <label>杯子名称</label>
              </div>
            </form>
          </div>

          <van-divider/>
        </div>


        <ul class="color-pick">
          <li v-for="(item,index) in colors"

              :style="{backgroundColor:item,height:width*0.1+'px',width:width*0.1+'px'}"
              :class="index===selectedColor?'active-color':''"
              @click="selectColor(index)"
          ></li>
        </ul>

        <div class="cup-add-info">
          <go-slider :cup="newCup" @change="changeCapacity"></go-slider>
          <div class="newCup-capacity">{{ newCup.capacity }} ml</div>
        </div>

        <div class="cup-add-intro" :style="{height:height*0.25+'px'}">

          <label for="text-bio" class="label-intro"></label>
          <textarea id="text-bio" v-model="newCup.intro" @click="toWrite">
            介绍一下它吧!
          </textarea>
        </div>

        <div class="cup-add-submit">
          <go-button-loading
              v-if="!save"
              :before-text="'保存'"
              :after-text="'保存成功！'"
              :message="'检查一下？'"
              :success-function="successFunc"
              :validate="validated"
              :error-text="'杯子可能并不想和你交朋友，可能是因为你不够了解杯子吧'"
          ></go-button-loading>
        </div>
      </div>
      <footer class="footer-author">By Zhou Xinchen</footer>
    </div>


  </div>
</template>

<script>
import {mapState} from "vuex";
import GoSlider from "@/components/common/GoSlider";
import GoButtonLoading from "@/components/common/GoButtonLoading";
import {Toast} from "vant";
import {addBlur} from "@/helper/utils";

export default {
  name: "CupAdd",
  components: {GoButtonLoading, GoSlider},
  props: {
    newCupList: {
      type: Array
    }
  },
  data() {
    return {
      colors: ['rgb(131,113,89)', 'rgb(59,124,219)', 'rgb(126,143,78)', 'rgb(32,180,207)', 'rgb(91,15,109)'],
      fileList: [],
      selectedColor: 0,
      newCup: {},
      saveCup: {},
      save: true,
      saveCount: 0,

      /*  drag  */
      flags: false,
      position: {x: 0, y: 0},
      nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
      moveDivCupAdd: null,
      wMax: null,
      hMax: null
    };
  },
  mounted() {
    this.newCup = this.newCupList[0];
    this.moveDivCupAdd = this.$refs.moveDivCupAdd;
    this.wMax = document.documentElement.clientWidth - this.moveDivCupAdd.offsetWidth;
    this.hMax = this.$root.$el.offsetHeight - 120 - this.moveDivCupAdd.offsetHeight;
  },
  computed: {
    ...mapState(['user', 'activeCup']),
    validated() {
      return this.newCup.capacity > 0;
    },
    width() {
      let w = document.documentElement.clientWidth;

      if (w < 375) return Math.floor(w * 0.95);
      else return 356;
    },
    height() {
      let h = document.documentElement.clientHeight;

      if (h < 812) return Math.floor(h * 0.615);
      return 500;
    }
  },
  created() {

  },
  methods: {
    close() {
      this.$emit('close');
      this.newCupList.splice(this.newCupList.indexOf(this.saveCup), 1);
      this.newCup = {}
      this.saveCup = {}
    },
    selectColor(index) {
      this.save = false;
      this.selectedColor = index;
      this.newCup.settings.waterColour = this.colors[index];
    },
    changeCapacity() {
      this.save = false;
    },
    toWrite() {
      this.save = false;
      if (this.newCup.intro === '介绍一下它吧!\nclick me') {
        this.newCup.intro = ''
      }
    },
    successFunc() {
      Toast({
        message: '保存成功',
      })
      console.log('保存成功')

      this.newCup.settings.waterColour = addBlur(this.newCup.settings.waterColour, 0.4);
      if (this.saveCount === 0) {
        this.newCup.id = this.user.cups.length + 1;
      }


      let i = this.user.cups.indexOf(this.saveCup);
      if (i >= 0) {
        this.user.cups.splice(this.user.cups.indexOf(this.saveCup), 1);
      }
      let settings = Object.assign({}, this.newCup.settings);
      this.saveCup = Object.assign({}, this.newCup);
      this.saveCup.settings = settings;

      this.saveCup.drinkWater = 0;
      this.user.cups.push(this.saveCup);
      this.save = true;
      this.saveCount++;
    },
    down(event) {
      this.flags = true;
      this.position.x = event.touches[0].clientX;
      this.position.y = event.touches[0].clientY;
      this.dx = this.moveDivCupAdd.offsetLeft;
      this.dy = this.moveDivCupAdd.offsetTop;
    },
    move(event) {
      if (this.flags) {
        this.nx = event.touches[0].clientX - this.position.x;
        this.ny = event.touches[0].clientY - this.position.y;
        this.xPum = this.dx + this.nx;
        this.yPum = this.dy + this.ny;

        if (this.xPum < 0) this.xPum = 0;
        else if (this.xPum > this.wMax) this.xPum = this.wMax;
        if (this.yPum < 0) this.yPum = 0;
        else if (this.yPum > this.hMax) this.yPum = this.hMax;
        this.moveDivCupAdd.style.left = this.xPum + "px";
        this.moveDivCupAdd.style.top = this.yPum + "px";
        //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        document.addEventListener("touchmove", function () {
          event.preventDefault();
        }, false);
      }
    },
    end() {
      this.flags = false;
    },
  },
  watch: {
    'newCup.cupName': {
      handler(newV, oldV) {
        this.save = false;
      }
    }
  }
}
</script>

<style lang="less">

.scale-up-left {
  animation: scale-up-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up-left {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    transform-origin: 0 50%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    transform-origin: 0 50%;
  }
}

.van-slider__bar {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(125, 194, 232);
  -webkit-transition: all .2s;
  transition: all .2s;
}

.cup-add-tool {
  z-index: 10;
  top: 10%;
  box-shadow: 10px 5px 15px -5px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  background-color: #fff;
  border-radius: 20px;

  .bg-color {
    background-color: #46a1de;
    transition-duration: .5s;
    transition: all 0.75s linear;
  }

  .dot {
    z-index: 10;
    position: absolute;
    top: 1.5%;
    right: 6%;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background-color: #8A0917;
    box-shadow: 0 4px 0 #5a060f;
    color: #fff;
  }


  nav {
    z-index: 9;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    padding: 5px 0;
    font-size: 15px;
    text-align: center;
    border-radius: 20px 20px 0 0;
  }

  .wrapper {
    position: absolute;
    border-radius: 0 0 20px 20px;
    top: 30px;
    width: 100%;
    height: 500px;
    background-color: #46a1de;
    transition: all 0.75s linear;

    .van-divider {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      font-size: 0.37333rem;
      line-height: 0.64rem;
      border-style: dashed;
      border-width: 0;

      color: #4298e7;
      border-color: #2a93ea;
      padding: 0;
      margin: 0;

      &::after, &::before {
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        box-sizing: border-box;
        height: 0.02667rem;
        border-color: inherit;
        border-style: inherit;
        border-width: 4px 0 0;
      }
    }

  }

  .cup-add-content {
    position: absolute;
    background-color: #fff;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 20px;

    .cup-add-intro {
      position: absolute;
      margin-top: 20px;
      height: 100%;
      width: 80%;
      left: 10%;

      #text-bio {
        position: absolute;
        resize: none;
        border: none;
        font-size: 14px;
        height: 100%;
        outline: 0;
        padding: 15px;
        width: 100%;
        border-radius: 20px;
        color: #8a97a0;

        transition: all .2s linear;
        margin-bottom: 30px;
      }

      #text-bio:focus {
        background-color: #e8eeef;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
      }

    }

    .color-pick-head {
      font-family: "Nunito", serif;
      margin: 5px 0;
      text-align: center;
      font-weight: 300;
      font-size: 20px;
    }

    ul {
      margin: 5px 0;
      padding: 4px 7px;
      text-align: center;

      transition-duration: 0.75s;

      .active-color {
        transition-duration: 0.75s;
        -webkit-transform: scale(1.2) translateY(-10px);
        transform: scale(1.2) translateY(-10px);
        box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
        border-bottom: 20px solid rgba(0, 0, 0, .15);
      }

      li {
        transition-duration: 0.75s;
        list-style: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border-bottom: 5px solid rgba(0, 0, 0, 0.1);
        display: inline-block;
        margin: 0 10px;
        box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
      }
    }

    .cup-add-submit {
      position: absolute;
      bottom: 5%;
      width: 20%;
      right: 20%;
    }
  }

}

.cup-add-info {
  margin: auto;
  //display: flex;
  padding-top: 30px;
  width: 80%;
  left: 10%;

  .newCup-capacity {
    font-size: 10px;
    margin: auto;
    text-align: center;
  }

  .divider {
    margin: 5px 0;
  }
}

.input-c {
  display: flex;
  padding: 10px 7px;

  .input-c-main {

    margin-left: 10px;

    .group {
      margin: auto;
      position: relative;
    }

    input {
      text-align: center;
      font-size: 17px;
      padding: 10px 10px 0 5px;
      display: block;
      width: 100%;
      border: none;
      border-bottom: 1px solid #757575;
    }

    input:focus {
      outline: none;
    }

    /* LABEL ======================================= */

    label {
      color: #999;
      font-size: 18px;
      font-weight: normal;
      position: absolute;
      pointer-events: none;
      left: 5px;
      top: 10px;
      transition: 0.2s ease all;
    }

    /* active state */

    input:focus ~ label,
    input:valid ~ label {
      top: -20px;
      font-size: 5px;
      font-family: ZCOOL, serif;
      color: #5264ae;
    }

    /* BOTTOM BARS ================================= */

    .bar {
      position: relative;
      display: block;
      width: 100%;
    }

    .bar:before,
    .bar:after {
      content: "";
      height: 2px;
      width: 0;
      bottom: 1px;
      position: absolute;
      background: #5264ae;
      transition: 0.2s ease all;
    }

    .bar:before {
      left: 50%;
    }

    .bar:after {
      right: 50%;
    }

    /* active state */

    input:focus ~ .bar:before,
    input:focus ~ .bar:after {
      width: 50%;
    }

  }

  .van-uploader__upload {
    border-radius: 20px;
  }

  .van-image__img {
    border-radius: 20px;
  }
}

.footer-author {
  position: absolute;
  bottom: 1.5%;
  width: 50%;
  left: 25%;
  z-index: 999;
  text-align: center;
  font-size: 10px;
  opacity: 0.33;
  color: #fff;
}


/* ANIMATIONS ================ */

@keyframes inputHighlighter {
  from {
    background: #5264ae;
  }
  to {
    width: 0;
    background: transparent;
  }
}


</style>